<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <script>
        /* 
        HTMl事件发生在HTML元素上的事情，比如：按钮被点击了，鼠标移到某元素上 键盘按下等称为事件
        js中有一种事件的监听机制，js可以通过监听某个触发，从而执行一段代码逻辑
        要想实现事件的监听，需要事件的绑定：
    
        方式一：在标签上使用onxxx="函数名()"绑定
        <input type="button" onclick="show()">

        function show(){...}
        
       
        方式二：
        通过获取DOM元素对象，然后调用onxxx属性绑定元素 指定当事件触发时如何执行代码   xxx表示的是事件名
        document.getElementXXXX.onxxxxx=function(){...}


        事件有很多，常见的事件：
        onload  浏览器页面加载完成后触发
        onclick 元素被单击
        onfocus 元素获取光标（焦点）
        onblur 元素失去光标或焦点
        onsubmit 当表单提交触发 false不提交  true才提交表单
        onmouseover 鼠标移入到元素之上
        onmouseout  鼠标移除元素
        onkeydown  键盘按下  事件对象的keycode可以获取按了哪个键
        onkeyup 键盘松开
        onkeypress 键盘产生打印字符
        onchange 内容发生改变 通常来将都是js向服务器发送请求模糊匹配数据 不足，事件不会随着文字的输入而触发，等到文字输入完成，失去光标才会触发
        oninput  只要输入框中的内容发生变化即可触发



        
        */


        //等待窗口完全加载完毕后再执行的监听onload  funcation表示执行的代码
        window.onload =function(){
             //1.获取元素对象
            var btn =  document.querySelector("#btn");

            //2.为对象绑定事件监听
            btn.onclick  = function(){
                alert("你点击了按钮");
            }

            //当文本框获取焦点时 背景色变黄色
            var usernme = document.getElementById("username");
            usernme.onfocus = function(){
                this.style.backgroundColor = "yellow";
            }

             //当文本框失去焦点时 背景色恢复
             usernme.onblur = function(){
                this.style.backgroundColor = "white";
            }


            //当表单提交时
            document.querySelector("#myform").onsubmit = function(){
                //通常情况下可以做表单数据的校验

                //一般需要返回值 false表示检验失败不允许提交  true可以提交
                if(username.length > 0){
                    //用户名为空
                    return false;
                }

                if(usernme.length <= 6){
                    //用户名不能小于6位
                    return false;
                }
                //此处省略n个验证

                return true;
            }


            //操作div  鼠标移入和移出变色
            //1.获取div对象
           var div = document.querySelector("#box");

            //2.为对象绑定事件监听
            div.onmouseover = function(){
                this.style.backgroundColor = "green";
                this.innerHTML= "哈哈哈";
                this.style.marginLeft = "100px";
                //this.style.width="1000px";

            }
            div.onmouseout = function(){
                this.style.backgroundColor = "yellow";
                this.innerHTML="略略略";
                this.style.marginLeft = "0px";
            }

            //username内容发生变化时div中显示一些不同内容
          /*  username.onchange = function(){
              
                div.innerHTML="变化了";
              
            } */

            username.oninput = function(){
                var i = 1;
                i++;
              
              div.innerHTML+="变化了"+i;
            
          }


          //username 键盘事件 event事件源 谁做了这个事情  里面包含了它的信息
          username.onkeydown=function(event){
            if(event.keyCode == 13){
                alert("你按了回车,您要提交吗？");
            }
          }

          //键盘按住不放
          username.onkeypress=function(){
            var i = 1;
                i++;
              
              div.innerHTML+="按住了"+i;
          }

        }


    </script>
</head>
<body>
    <input id="btn" type="button" value="点我">
    <input type="text" id="username">

    <hr>
    <form id="myform" action="#" method="post">
       用户名 <input  type="text" name="username">
       密码 <input type="password" name="password">
        <input type="submit" value="提交"></form>
        <hr>
        <div id="box">dfsdf</div>
</body>
</html>